﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JCropList.aspx.cs" Inherits="ProjectQuaDep.JCropList" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Crop ảnh</title>
    <link rel="stylesheet" href="/Css/style.css?v=346" type="text/css" />
    <link rel="stylesheet" href="/Css/chosen.css?v=347" type="text/css" />
    <link rel="stylesheet" href="/Css/jquery-ui-1.10.3.custom.css?v=47" type="text/css" />
    <link type="text/css" href="/js/jcrop19/jquery.Jcrop.css" rel="stylesheet" />
    <script type="text/javascript" language="javascript" src="/js/jquery.js"></script>
    <script type="text/javascript" language="javascript" src="/Js/jquery.ajaxupload.js"></script>
    <script type="text/javascript" language="javascript" src="/js/easing.js"></script>
    <script type="text/javascript" language="javascript" src="/js/jquery.cycle.all.js"></script>
    <script type="text/javascript" language="javascript" src="/js/chosen.jquery.js"></script>
    <script type="text/javascript" language="javascript" src="/js/jquery-ui-1.10.3.custom.js"></script>
    <script type="text/javascript" src="/js/jcrop19/jquery.Jcrop.js"></script>
    <script type="text/javascript" language="javascript" src="/js/jquery.center.js"></script>
    <script type="text/javascript" language="javascript" src="/js/aigiongai.js?v=45"></script>
    <script type="text/javascript" src="/Js/tools.js"></script>

    <style type="text/css">
        body, table, div, form, input, textarea, select, img {border: 0 none;margin: 0; outline: medium none; padding: 0;}
        .btnUserAvatar {float:left;width:321px;height:202px;cursor:pointer}
        
        .popup4 {
                background: none repeat scroll 0 0 #F4F4F4;
                top: 15% !important;
                z-index: 1000;
                left:37% !important;
            }
            .popup4 .photo-crop {
                display: table;
                margin: 20px auto;
            }
            .popup4 .note-photo {
                display: block;
            }
            .popup4 .note-photo p {
                clear: both;
                color: #777777;
                display: block;
                font-size: 13px;
                font-style: italic;
                padding: 10px;
                text-align: center;
                width: 610px;
            }
            .popup4 .popup-title {
                font-family: "Bodoni";
                font-size: 28px;
                padding: 20px 0 10px;
                text-align: center;
                text-transform: uppercase;
            }
            .popup4 .popup-button {
                margin-top: 30px;
                padding: 20px;
                text-align: center;
            }
            .content-upload .main_avatar_container {
                width: 256px;
            }
            #bg-popup {
                background: none repeat scroll 0 0 #000000;
                display: none;
                height: 100%;
                left: 0;
                position: fixed;
                top: 0;
                width: 100%;
                z-index: 98;
            }
            #back-top {
                bottom: 30px;
                position: fixed;
                right: 10px;
                z-index: 900;
            }
            #back-top a {
                display: block;
                width: 46px;
            }
            #back-top a:hover {
                color: #000000;
            }
            #back-top span {
                background: url("/images/scrollTop.png") no-repeat scroll center center #DDDDDD;
                display: block;
                height: 46px;
                margin-bottom: 7px;
                width: 46px;
            }
            .form-submit-cancel {
    color: #999999;
    display: inline-block;
    font-weight: bold;
    height: 40px;
    letter-spacing: 2px;
    line-height: 40px;
    padding: 0 10px;
    text-transform: uppercase;
}
            .form-submit-submit {
    background-color: #222222;
    color: #FFFFFF;
    display: inline-block;
    font-weight: bold;
    height: 40px;
    letter-spacing: 3px;
    line-height: 40px;
    padding: 0 10px;
    text-transform: uppercase;
}
    </style>
    <script type="text/javascript">
        jQuery(function ($) {
            var idUserAvatar = '#userAvatar';
            var defaultAvatar = '/images/web/home02_40.png';
            var domainStorage = '<%=BO.Const.sHttpDomain %>';
            var reUpload = false;
            var jcropAPI = null;
            bindCrop('<%=urlImages %>', 491, 307, 491 / 307, idUserAvatar); 
            function bindCrop(url, width, height, ratio, control) {
                var me = this;
                $(".popup4").show().center(true);
                $('#bg-popup').css({ 'opacity': '0.8' });
                $('#bg-popup').fadeIn('slow');
                var wHeight = document.documentElement.clientHeight;
                $('#bg-popup-quiz').css({ 'height': wHeight }); // only need force for IE6
                var $img = $('<img src="" id="imgCrop_' + height + '" alt="" />');
                $('.photo-crop').append($img);
                $(".popup4 img[id*=imgCrop]").attr('src', domainStorage + url);
                $('img[id*=imgCrop]').Jcrop({
                    onChange: storeCoords,
                    onSelect: storeCoords,
                    minSize: [width, height],
                    setSelect: [100, 100, 50, 50],
                    aspectRatio: ratio
                }, function () { jcropAPI = this; });
                $('#btnCrop').bind('click', function () { crop(control); });
                $('#btnCropCancel').bind('click', function () { hideCrop(control); });
            }
            function hideCrop(control) {
                var me = this;
                $(".popup4").hide();
                $('#btnCrop').unbind('click');
                $('#btnCropCancel').unbind('click');
                $('#bg-popup').fadeOut('slow');
                jcropAPI.destroy();
                $('.photo-crop').find('img[id*=imgCrop]').remove();
                var $src = $(control).attr('src');
                if ($src == '' && reUpload === false) $(control).attr('src', defaultAvatar);
                else if ($src == '' && reUpload === true) {
                    $(control).attr('src', currentAvatar);
                    reUpload = false;
                    currentAvatar = null;
                }
                else {
                    me.reUpload = false;
                    me.currentAvatar = null;
                }
            }
            function crop(control) {
                var me = this;
                var img = $('img[id*=imgCrop]').attr('src');
                var x = $('#X').val();
                var y = $('#Y').val();
                var w = $('#W').val();
                var h = $('#H').val();

                $.ajax({
                    url: '/Ajax/UploadHanlder.ashx',
                    data: { 'command': 'cropavatar', 'image': img, 'x': x, 'y': y, 'w': w, 'h': h },
                    dataType: 'json',
                    success: function (data) {
                        if (data.Type == 1) { /*openIframe(); return;*/ }
                        if (data.Success === true) {
                            bindAvatar(control, data.Images);

                            hideCrop();
                        };
                    }
                });
            }

            function bindAvatar(control, url) {
                var me = this;
                $(control).attr('src', domainStorage + url);
                //alert(domainStorage + url);

                $.ajax({
                    url: '/Services/UpdateImgThumbList.aspx',
                    data: { 'url': url, 'id': <%=id %> },
                    success: function (data) {
                     alert("Ảnh đã thumb thành công và hiện trên danh sách xin cảm ơn bạn!");
                    window.location="/Admin/AwardsImages/Images.aspx";
                    }
                });
            }

            function storeCoords(c) {
                $('.popup4 input[id$=X]').val(c.x);
                $('.popup4 input[id$=Y]').val(c.y);
                $('.popup4 input[id$=W]').val(c.w);
                $('.popup4 input[id$=H]').val(c.h);
            };
        });
        
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <img id="userAvatar" class="btnUserAvatar" alt="" src="/images/web/home02_40.png" runat="server" clientidmode="Static" />
    <a href="javascript:void(0);" id="btnUserAvatar" class="btnUserAvatar fr mt10"></a>

    <%--Upload crop avatar--%>
    <div class="popup4" style="display: none;">
        <div>
            <div class="popup-title">
                Upload ảnh ở trang Danh sách
            </div>
            <div class="photo-crop">
                <asp:HiddenField ID="X" runat="server" Value="0" ClientIDMode="Static" />
                <asp:HiddenField ID="Y" runat="server" Value="0" ClientIDMode="Static" />
                <asp:HiddenField ID="W" runat="server" Value="250" ClientIDMode="Static" />
                <asp:HiddenField ID="H" runat="server" Value="250" ClientIDMode="Static" />
            </div>
            <div class="note-photo">
                <p>
                    “Di chuyển các góc của hộp trong suốt để cắt ảnh này thành avatar của bạn”</p>
            </div>
            <div class="popup-button">
                <a id="btnCropCancel" class="form-submit-cancel" href="javascript:void(0);">Hủy bỏ</a>
                <a id="btnCrop" class="form-submit-submit" href="javascript:void(0);">Hoàn tất</a>
            </div>
        </div>
    </div>
    <div id="bg-popup">
    </div>

    </form>
</body>
</html>
